<template>
	<view class="content">
		<view class="detailWrap">
			<view class="wrap-title">
				预约信息
			</view>
			<view class="wrapTxt">
				<text>设备名称</text>{{orderInfo.deviceName}}
			</view>
			<view class="wrapTxt">
				<text>时间段</text>{{orderInfo.appointmentTimePeriod}}
			</view>
			<view class="wrapTxt">
				<text>联系人</text>{{orderInfo.contactName}}
			</view>
			<view class="wrapTxt">
				<text>联系地址</text>{{orderInfo.contactAddress}}
			</view>
			<view class="wrapTxt">
				<text>备注</text>
				<view class="remmkk">{{orderInfo.remark == null?'':orderInfo.remark}}</view>
			</view>
			<view class="wrapTxt">
				<text>预约内容</text>{{orderInfo.serviceType | typeFmt}}
			</view>
			<view class="wrapTxt">
				<text>上传图片</text>
				<view class="tpp" v-if="orderInfo.imageUrl != null">
					<image style="width: 124rpx;height:124rpx;border-radius:8rpx;display: block;" v-for="(item,index) in orderInfo.imageUrl.split(',')" :key="index" :src="item" mode=""></image>
				</view>
			</view>
			<view class="wrapTxt" style="color:#176AFD;">
				<text>工单报告</text>
				<label @click="showDocument" style="color: blue;" v-if="orderInfo.repairResult != null">查看工单</label>
			</view>
		</view>
		
		<view class="detailWrap">
			<view class="wrap-title">
				订单状态
			</view>
			<view class="wrapTxt">
				<text>订单状态</text>{{orderInfo.status | statusFmt}}
			</view>
		</view>	
		
		<view class="detailWrap">
			<view class="wrap-title">
				订单信息
			</view>
			<view class="wrapTxt">
				<text>服务单号</text>{{orderInfo.orderNo}}
			</view>
			<view class="wrapTxt">
				<text>下单时间</text>{{orderInfo.submitTime == null?'':orderInfo.submitTime}}
			</view>
		</view>	
		
		<view class="detailWrap">
			<view class="wrap-title">
				{{orderInfo.arrivalTime == null?'':orderInfo.arrivalTime}}服务
			</view>
			<view class="photoli">
				<view class="phtxt">
					服务前照片
				</view>
				<view class="imgList">
					 <!-- <u--image :src="orderInfo.beforeImageUrl" width="80px" height="80px"></u--image> -->
					 <image :src="orderInfo.beforeImageUrl" mode=""></image>
				</view>
			</view>
			
			<view class="photoli">
				<view class="phtxt">
					服务中照片
				</view>
				<view class="imgList">
					<!-- <u--image :src="orderInfo.middleImageUrl" width="80px" height="80px"></u--image> -->
					<image :src="orderInfo.middleImageUrl" mode=""></image>
				</view>
			</view>
			
			<view class="photoli">
				<view class="phtxt">
					服务后照片
				</view>
				<view class="imgList">
					<!-- <u--image :src="orderInfo.afterImageUrl" width="80px" height="80px"></u--image> -->
					<image :src="orderInfo.afterImageUrl" mode=""></image>
				</view>
			</view>
			
			<view class="gongTxt">
				采购清单
			</view>
			
			<table class="baseTable">
				<tr>
					<th>序号</th>
					<th>材料名称</th>
					<th>规格</th>
					<th>小计</th>
				</tr>
				
				<tbody>
					<tr v-for="(item,index) in orderInfo.partsUsageList" :key="index">
						<td>{{index + 1}}</td>
						<td>{{item.partsName}}</td>
						<td>{{item.specification}}</td>
						<td>{{item.quantity}}</td>
					</tr>
				</tbody>
			</table>
			
		</view>	
		
		<view class="detailWrap">
			<block v-for="(item,index) in timeList" :key="index">
				<view class="timeli" :class="'timeli' + (index + 1)">
					<view class="time1">
						{{item.createTime}}
					</view>
					<view class="time2">
						{{item.status}}
					</view>
				</view>
			</block>
			
		</view>
			
	</view>
</template>

<script>
	import { getOrderById, getOrderProgress } from '@/api/login.js';
	export default {
		data() {
			return {
				orderInfo:{},
				serviceList: [],
				timeList: []
			}
		},
		filters:{
			typeFmt(val) {
				if(val == 0) {
					return '安装';
				} else if(val == 1){
					return '维修';
				} else if(val == 2){
					return '保养';
				} else if(val == 3){
					return '巡检';
				}
			},
			statusFmt(val){
				if(val == 0) {
					return '待分配';
				} else if(val == 1){
					return '待服务';
				} else if(val == 2){
					return '服务中';
				} else if(val == 3){
					return '已完成';
				} else if(val == 4){
					return '已评价';
				} else if(val == 5){
					return '已取消';
				}
			}
		},
		onLoad(opt) {
			this.getDetail(opt.idd,opt.serviceType);
			this.getProcess(opt.idd);
		},
		onShareAppMessage() {
			
		},
		methods: {
			getProcess(idd){
				getOrderProgress({orderId:idd}).then(res=>{
					if(res.code == 200) {
						this.timeList = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			getDetail(idd, type){
				getOrderById({id:idd}).then(res=>{
					if(res.code == 200) {
						if(type == 3) {
							// 巡检详情
							this.orderInfo = res.data.repairOrder; 
						} else {
							this.orderInfo = res.data;
						}
						
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			showDocument(){
				if(!String(this.orderInfo.repairResult).includes('http')) {
					return uni.$u.toast('文件格式不正确，无法打开!');;
				}
				let openUrl = 'http' + String(this.orderInfo.repairResult).split('http')[1];
				uni.downloadFile({
				  url: openUrl,
				  success(res) {
					const tempFilePath = res.tempFilePath;
					uni.openDocument({
					  filePath: tempFilePath,
					  fileType: 'pdf',
					  success: function () {
						console.log('成功打开 PDF');
					  },
					  fail: function (err) {
						console.error('打开失败:', err);
					  }
					});
				  },
				  fail(err) {
					console.error('下载失败:', err);
				  }
				});
			
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#F5F5F5;padding:16rpx 24rpx;min-height:100vh;
	.detailWrap{
		background-color:#fff;border-radius:12rpx;padding:24rpx 32rpx;margin-bottom:16rpx;
		.wrap-title{
			@include baseFont(28rpx,#000,44rpx);font-weight:500;margin-bottom:12rpx;
		}
		.timeli{
			padding-left:40rpx;padding-bottom:38rpx;position: relative;
			.time1{
				@include baseFont(30rpx,#333,42rpx);font-weight: 500;margin-bottom:8rpx;
			}
			.time2{
				@include baseFont(28rpx,#666,36rpx);
			}
		}
		.timeli2::before{
			content: '';width: 2rpx;height: 74rpx;background: #D9D9D9;position: absolute;
			left:12rpx;top:42rpx;
		}
		.timeli::after{
			content:'';width: 16rpx;position: absolute;left:0;top:5rpx;height: 16rpx;background: #3671E9;
			border: 6rpx solid #D6E2FC;border-radius:50%;
		}
		.timeli1::before{
			content: '';width: 2rpx;height: 74rpx;background: #D9D9D9;position: absolute;
			left:12rpx;top:42rpx;
		}
		.photoli{
			@include flx;margin-bottom:12rpx;
			.phtxt{
				@include baseFont(28rpx,#666,40rpx);width:160rpx;
			}
			.imgList{
				@include flx;
				image{
					width:124rpx;height:124rpx;border-radius:8rpx;margin-right:16rpx;display: block;
				}
			}
		}
		.gongTxt{
			@include baseFont(28rpx,#666,40rpx);margin-bottom:16rpx;
		}
		.baseTable {
		  width: 100%; /* 或者指定一个具体的宽度 */
		  border-collapse: collapse; /* 使边框合并 */
		  tr{
			  display: flex;flex-direction: row;
			  th, td {
				width: 25%;
			    text-align: center; /* 文本左对齐 */
			  }
			  th{
			  	@include baseFont(26rpx,#999,88rpx);background-color: #F0F0F0;
			  }
			  td{
				  @include baseFont(26rpx,#333,88rpx);border-bottom:2rpx solid #F0F0F0;
			  }
		  }
		}
		.wrapTxt{
			@include baseFont(28rpx,#333,40rpx);margin-bottom:12rpx;@include flx;flex-wrap: nowrap;align-items: flex-start;
			text{
				color:#666;display: block;width:160rpx;
			}
			label{
				display: block;
			}
		}
	}
}
</style>
